<template>
  <div class="header">
    <div class="ib pt">
      <!-- <div class="title">{{titleText?titleText:systemName+(instanceName?'-'+instanceName:'')}}</div> -->
      <!-- <div class="title"><img class="mgt10 mgb10" src="/static/images/headerLogo.png"/></div> -->
      <div class="title">直播云平台</div>
    </div>
    <div :class="{'header-menu':true,'header-menu-open':menuOpen,'header-menu-close':!menuOpen}" >
      <span class="header-menu-first" @click.stop="showMenu = !showMenu">
        <i class="icon-amenu" style="vertical-align:top;"></i>
        <span>{{menus[headerMenuIndex] && menus[headerMenuIndex].name}}</span>
      </span>
      <transition name="el-zoom-in-top">
        <ul v-show="showMenu" class="header-menu-list">
          <li @click="menuClick(item,index)" :class="{'is-active':activeCode==item.id}" v-for="(item,index) in menus" :key="index">{{item.name}}</li>
        </ul>
      </transition>
    </div>
    <div class="fr header-right">
      
      <el-dropdown class="header-user-dropdown" @command="dropdownClick">
        <div class="header-user el-dropdown-link ">
          <img id="id_userImage" v-show="userInfo.headImg" class="user-image" :src="userInfo.headImg" alt="">
          <i v-show="!userInfo.headImg" class="icon-ic-man user-image"></i>
          <span class="user-name">
            {{userInfo.name}}
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item v-if="initMenu && (userType == 4)" command="/auth-user/index">个人设置</el-dropdown-item> -->
          <!-- <el-dropdown-item command="/update-log/index.html">更新日志</el-dropdown-item> -->
          <el-dropdown-item v-if="initMenu && (userType == 1 || userType == 3)" command="/consumption">消费查询</el-dropdown-item>
          <el-dropdown-item v-if="initMenu && (userType != 4)" command="/account">账号修改</el-dropdown-item>
          <el-dropdown-item :disabled="logoutDisabled" command="logout">退出登录</el-dropdown-item>
          <!-- <el-dropdown-item v-if="toggle && initMenu" command="toggle">切换系统</el-dropdown-item> -->
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
  import menuModel from "@M/menu"
  import userModel from "@M/user"
  import commonModel from "@M/common"
  export default {
    props:{
      initMenu:{
        type:Boolean,
        default:true
      },
      titleText:{
        type:String,
        default:''
      }
    },
    data() {
      return {
        guideIndex: 0,
        oName: "",
        popupTitle: "",
        menuOpen: false,
        showMenu: false,
        showPopup: false,
        updateLogRemind: false,
        popupComponse: null,
        logoutDisabled: false,
        chatboxShow: true,
        init: false,
        activeCode: '',
        headerMenuIndex: 0,
        privilege: '',
        name: "游客",
        headImg: '',
        showOrgToggle: false,
        popupWidth: 0,
        messageCount: 0,
        menus: [],
        toggle:false,
        systemName:"",
        instanceName:"",
        userInfo:userModel.get(),
        userType: 0, //用户类型 1为频道管理员，2为应用管理员，3为平台管理员 4为超级管理员
      }
    },
    methods: {
      dropdownClick(command) {
        if (command == 'logout') {
          this.logoutDisabled = true;
          userModel.logout(() => {
            this.$message.success("退出成功");
            setTimeout(function () {
              window.location.href = "login.html";
            }, 1000);
          });
          return;
        }else if(command == 'toggle'){
            window.location.href = "toggle.html";
        }
        this.$toPage(command,{
          // userInfo:this.userInfo
        });
      },
      menuClick(item, index) {
        if(index==2){
          sessionStorage.setItem('dataChannelId','')
        }
        // 点击菜单时清空直播管理已选应用
        sessionStorage.removeItem('menuAppId')
        // 扩展字段是 SUPPORT / SUPORT 打开使用支持
        if(item.ext == "SUPPORT" || item.ext == "SUPORT"){
          this.$utils.linkTo('/html/suport.html')
          return
        }
        ////
        var self = this;
        this.activeCode = item.id;
        this.headerMenuIndex = index;
        self.$root.eventHandle.$emit("UPDATE_SUB_MENU", this.activeCode);
        // 扩展字段是 CHECK_APP 则检查有没有应用
        if(item.ext == "CHECK_APP"){
          if(false){
            // 没有应用则跳转添加应用页面
            this.$toPage('/appAddPage')
            return
          }
        }
        ////
        if(item.url && item.url != '#'){
          this.$toPage(item.url)
        }
      },
      resize() {
        var headerWidth = document.querySelector(".header").clientWidth;
        var menuLeft = document.querySelector(".header .header-menu").offsetLeft;
        var headerRight = document.querySelector(".header .header-right").offsetLeft;

        var menuMaxWidth = headerRight - menuLeft - 20;

        //var menuWidth2 = document.querySelectorAll(".header .header-menu-list>li").length * 80;

        var menuWidth = this.menus.length * 80;

        this.menuOpen = (menuWidth < menuMaxWidth);
      },
      updateMenu() {
        var self = this;
        self.headerMenuIndex = 0;
        menuModel.delete();

        menuModel.listMenu("body", (data) => {
          this.menus = data || [];
          let path = ''
          if(this.$router.mode == 'hash'){
            if(window.location.hash.indexOf('#') != -1){
              path = window.location.hash.split('#')[1].split('?')[0]  // 当前路由地址
            }
          }else{
            path = window.location.pathname  // 当前路由地址
          }
          for(let i = 0; i < this.menus.length; i++){
            if(this.menus[i].url == path){
              this.activeCode = this.menus[i] && this.menus[i].id;
              break
            }
            let second = this.menus[i].children || [] // 二级菜单
            for(let j = 0; j < second.length; j++){
              let third = second[j].children || [] // 三级菜单
              for(let k = 0; k < third.length; k++){
                if(third[k].url == path){
                  this.activeCode = this.menus[i] && this.menus[i].id;
                  break
                }
              }
            }
          }
          this.activeCode = this.activeCode || (this.menus[0] && this.menus[0].id);
          
          if (this.activeCode) {
            self.$root.eventHandle.$emit("UPDATE_SUB_MENU", this.activeCode);
          }
          setTimeout(() => {
            self.resize();
          }, 0);
        });

      }
    },
    created() {
      var self = this;
      self.$root.eventHandle.$on("BODY_CLICK", function () {
        self.showMenu = false;
      });
      self.$root.eventHandle.$on("UPDATE_USERTYPE", function () {
        self.userType = sessionStorage.getItem("userType")
      });
    },
    mounted() {
      var self = this;
      this.$root.eventHandle.$on("RESIZE", function () {
        self.resize();
      });
      self.resize();

      self.$root.eventHandle.$on("UPDATE_MENU", function () {
        self.updateMenu();
      });
      if(self.initMenu){
        this.updateMenu();
      }
      this.name = userModel.getItem("name");
      this.toggle = self.initMenu && userModel.getItem("toggle");


      self.$root.eventHandle.$on("NEW_MESSAGE_COUNT", function (total) {
        self.messageCount = total;
      });

      if(this.initMenu){
        commonModel.getSystemNameForInstance((data)=>{
          this.systemName = data.systemName;
          this.instanceName = data.instanceName;
          document.title = this.systemName+"-"+this.instanceName;
        });
      }else{
        commonModel.getSystemNameForUser((data)=>{
          this.systemName = data.systemName;
          this.instance_name = '';
          document.title = this.systemName+"-系统切换";
        });
      }

    }
  }
</script>
<style lang="scss">
  .xy-right-in-enter-active,
  .xy-right-in-leave-active {
    transition: all 0.5s ease;
  }

  .xy-right-in-enter,
  .xy-right-in-leave-to {
    transform: translateX(100%);
  }
  
  .header-user-dropdown {
    &.el-dropdown {
      font-size: 0;
    }
  }

  .el-dropdown-menu__item {
    white-space: nowrap;
  }
</style>

<style lang="scss" scoped>
  @import '../assets/scss/variable.scss'; // 新手指导的样式 START
  .header {
    background-color: $xy-color-main;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 0;
    & .title {
      font-size: 16px;
      display: inline-block;
      height: 60px;
      line-height: 60px;
      vertical-align: top;
      margin-left: 10px;
    }
  }

  .logo {
    margin-left: 10px;
    margin-top: 8px;
    width: 133px;
    height: 44px;
  }

  .header-menu-open {
    & .header-menu-first {
      display: none;
    }
    & .header-menu-list {
      display: inline-block !important;
    }
    &.header-menu {
      margin-left: 32px;
      display: inline-block;
      font-size: 0;
      line-height: 60px;
      height: 60px;
      vertical-align: top;
      & li {
        display: inline-block;
        font-size: 14px;
        width: 80px;
        text-align: center;
        cursor: pointer;
        &:hover {
          background-color: #258EFC;
        }
        &.is-active {
          background-color: #2684E5;
        }
      }
    }
  }

  .header-menu-close {
    &.header-menu {
      position: relative;
      display: inline-block;
      font-size: 0;
      line-height: 60px;
      height: 60px;
      vertical-align: top;
      margin-left: 32px;
    }
    & .header-menu-first {
      display: inline-block;
      padding: 0 15px;
      cursor: pointer;
      background-color: #2684E5;
      & span {
        font-size: 14px;
        display: inline-block;
        vertical-align: top;
        margin-left: 5px;
      }
      height: 60px;
      line-height: 60px; // &:hover {
      //   background-color: #258EFC;
      // }
    }
    & .header-menu-list {
      width: 145px;
      z-index: 999;
      position: absolute;
      left: 0;
      background: #FFF;
      color: $xy-text-color-regular;
      border: 1px solid $xy-border-color-lighter;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      border-radius: 4px;
      margin: 5px 0;
      padding: 10px 0;
      & li {
        white-space: nowrap;
        padding: 0 20px;
        cursor: pointer;
        font-size: 14px;
        line-height: 36px;
        &:hover {
          background-color: #ecf5ff;
          color: #66b1ff;
        }
        &.is-active {
          color: $xy-color-main;
          background-color: #F2F6FC;
        }
      }
    }
  }

  .header-org {
    font-size: 14px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-right {
    display: inline-block;
    line-height: 60px;
    vertical-align: top;
    height: 60px;
  }

  .header-org {
    margin-top: 10px;
    height: 40px;
    border-radius: 3px;
    background-color: #2684E5;
    line-height: 40px;
    padding: 0 10px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    & i {
      margin-right: 10px;
    }
  }

  .header-remind {
    cursor: pointer;
    text-align: center;
    height: 60px;
    width: 60px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: top;
    &:hover {
      background-color: #258EFC;
    }
    & img {
      border-radius: 100%;
      display: inline-block;
      margin-top: 15px;
      vertical-align: top;
    }
    &.is-remind {
      position: relative;
      &::after {
        content: ' ';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background-color: #FF6D6D;
        position: absolute;
        top: 15px;
        left: 38px;
      }
    }
  }

  .header-user {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    padding: 0 10px;
    vertical-align: top;
    &:hover {
      background-color: #258EFC;
    }
    & .user-image {
      margin-right: 10px;
      height: 30px;
      width: 30px;
      line-height: 30px;
      border-radius: 100%;
      text-align: center;
      color: #FFF;
    }
    & .user-name {
      font-size: 14px;
      display: inline-block;
      vertical-align: middle;
      color: #FFF;
      cursor: pointer;
    }
  }

  .header-popup {
    position: fixed;
    height: 100%;
    width: 430px;
    top: 0;
    right: 0;
    background: #FFF;
    border-left: 1px solid $xy-border-color-base;
    z-index: 2002;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .header-popup-title {
    height: 60px;
    line-height: 60px;
    background-color: $xy-border-color-extra-light;
    padding-left: 20px;
    & span.is-title {
      font-size: 14px;
      color: $xy-text-color-primary;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 300px;
      vertical-align: middle;
    }
    & span.is-close {
      float: right;
      display: inline-block;
      height: 60px;
      width: 60px;
      line-height: 60px;
      text-align: center;
      cursor: pointer;
      &:hover {
        background: #EBEEF5;
        & i {
          color: #409EFF;
        }
      }
      i {
        color: $xy-text-color-placeholder;
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 20px;
      }
    }
  }

  .header-popup-body {
    display: -webkit-box;
    -webkit-box-flex: 1;
  }

  .header-scale-fullscreen {
    position: absolute;
    top: 0;
    right: 0;
    float: right;
    height: 60px;
    padding: 20px;
    line-height: 1;
    &:hover {
      background-color: #258EFC;
    }
    cursor:pointer;
    i {
      position: absolute;
      top: 20px;
      font-size: 20px;
    }
    span {
      display: inline-block;
      font-size: 16px;
      color: #fff;
      height: 20px;
      line-height: 20px;
      padding-left: 30px;
    }
  }

  .message-fixed {
    position: fixed;
    z-index: 999;
    right: 30px;
    bottom: 30px;
    background: #41495B;
    border-radius: 4px;
    color: #FFF;
    font-size: 14px;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    & i {
      font-size: 24px;
      margin-right: 5px;
    }
    & .is-number {
      display: none;
    }
    & .is-text {
      display: none;
    }
    &:hover {
      & .is-text {
        display: inline;
      }
    }
    &.is-number {
      & i {
        display: none;
      }
      & .is-number {
        display: inline-block;
        border-radius: 100%;
        background: #FF6D6D;
        height: 20px;
        width: 20px;
        line-height: 20px;
        margin-right: 5px;
      }
    }
  }
</style>